<template>
    <div id="cart">

        <!-- NavBar 导航栏 -->
        <van-nav-bar title="购物车" @click-left="onClickLeft" right-text="清空" @click-right="onClickRight">
            <template #left>
                <div ref="left" v-show="editShow" style="color:red;">编辑</div>
                <div ref="left" v-show="!editShow" style="color:red;">完成</div>
            </template>
        </van-nav-bar>

        <div class="cart-top-img" v-show="cartdata.length <= 0">
            <img src="img/topic.png" alt="">
        </div>

        <!-- 购物车数据 -->
        <div v-show="editShow" class="cart-data">
            <van-card
                v-for="item in cartdata"
                :key="item.id"
                :price="item.minPrice | filprice"
                :title="item.name"
                :thumb="item.pic"
                >
                <template #num>
                    <van-stepper
                        v-model="item.count"
                        theme="round"
                        button-size="22"
                        @plus="max(item)"
                        @minus="minus(item)"
                        />
                </template>
            </van-card>
        </div>
         <!-- 购物车数据===>编辑 -->
        <div v-show="!editShow" class="cart-data">
            <van-checkbox-group v-model="result" ref="checkboxGroup">
                <van-row v-for="item in cartdata" :key="item.id">
                    <van-col span="3">
                        <van-checkbox :name="item" :checked="item.checked" @click="check()"></van-checkbox>
                    </van-col>
                    <van-col span="21">
                        <!-- 滑动单元格 -->
                        <van-swipe-cell>
                            <van-card
                                :price="item.minPrice | filprice"
                                :title="item.name"
                                :thumb="item.pic"
                                >
                                <!-- 步进器 -->
                                <template #num>
                                    <van-stepper 
                                        v-model="item.count" 
                                        theme="round" 
                                        button-size="22" 
                                        disable-input 
                                        @plus="max(item)"
                                        @minus="minus(item)"
                                    />
                                </template>
                            </van-card>   
                            <!-- 删除 -->
                            <template #right>
                                <van-button 
                                    square 
                                    text="删除" 
                                    type="danger" 
                                    class="delete-button" 
                                    @click="del(index)"
                                />
                            </template>
                        </van-swipe-cell>
                    </van-col>
                </van-row>
            </van-checkbox-group>
        </div>
        <!-- 提交订单栏 -->
        <van-submit-bar v-show="cartdata.length > 0" button-color="#CE2525" :price="allprice*100" button-text="下单" @submit="onOrder()">
            <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
        </van-submit-bar>
        
       
        <!-- ---------------------------------- -->
        <p>猜你喜欢</p>
        <div class="cart-list">
            <Recommend />
        </div>
        
    </div> 
</template>

<script>
import Recommend from '../components/home/Recommend';

export default {
    components:{
        Recommend,
    },
    data() {
        return {
            editShow:true,   // 编辑/完成
            cartdata:this.$store.state.cartList,  // 购物车数据
            result:[],
            checked:false,
        }
    },
    methods: {
        // 步进器++
        max(item){
            this.$store.commit("max",item);
        },
        // 步进器--
        minus(item){
            this.$store.commit("min",item);
        },
        // 点击 编辑 \ 完成
        onClickLeft(){
            this.editShow = !this.editShow;
        },
        // 删除
        del(index){
            this.cartdata.splice(index,1);
        },
        // 清空购物车
        onClickRight(){
            // 清空购物车
            localStorage.removeItem("vuex");
            this.cartdata = [];
        },
        // 全选/取消全选
        checkAll(){
            this.$refs.checkboxGroup.toggleAll(this.checked);
        },
        // 点击 复选框 选中
        check(){
            if(this.cartdata.length == this.result.length){
                this.checked = true;
            }else{
                this.checked = false;
            }
        },
        // 点击 跳转确认订单栏
        onOrder(){
            this.$router.push("/Order");
            this.$message("请先添加收货地址！")
        }
    },
    // 计算属性
    computed: {
        // 选中 总价
        allprice(){
            var price = 0;
            this.result.forEach((item) => {
                price += item.count * item.minPrice * 100;
            });
            return price;
        }
    },
    // 过滤器
    filters:{
        // 过滤价格
        filprice(price){
            return (price*100).toFixed(2);
        }
    }
}
</script>

<style lang="scss">
#cart{
    width:100%;
    height:100%;
    .van-nav-bar{
        width:100%;
        color: red;
        position: fixed;
        top: 0;
        left: 0;
    }
    .cart-top-img{
        width:100%;
        z-index:8;
        img{
            width:100%;
            z-index: 8;
        }
    }
    .cart-data{
        margin-top:0.91rem;
    }
    .van-checkbox-group{
        .delete-button {
            height: 100%;
        }
        .van-col{
            .van-checkbox{
                margin:0.8rem 0 0 0.3rem;
            }
        }
        .van-card{
            margin-bottom: 0.1rem;
        }
    } 
    p{
        font-size: 0.28rem;
        text-align: center;
        margin:0.8rem 0 0.4rem 0;
    }
    .cart-list{
        width:100%;
        height:14rem;
    }
    .van-submit-bar{
        position: fixed;
        bottom: 1rem;
    }
}
</style>